<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>参与合买</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/own.css"/>
    <script type="text/javascript" src="../../js/mui.min.js" ></script>
    <script src="../../js/mui.pullToRefresh.js"></script>
	<script src="../../js/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script> 
	<style>
		.mui-pull-bottom-tips {
				text-align: center;
				font-size: 15px;
				line-height: 40px;
				color: #777;
		}
		.mui-pull-loading { 
		    margin-right: 10px;
		    -webkit-transition: -webkit-transform .4s;
		    transition: transform .4s;
		    -webkit-transition-duration: 400ms;
		    transition-duration: 400ms;
		    vertical-align: middle;
		}
	</style>
	<script>
		
    	mui.init(); 
    	mui.plusReady(function(){
    		var pageNo = 1;
    		//初始化监听头部和底部事件
//			tzdr.init.initHearListener();
//			tzdr.init.initButtomListener();
			//循环初始化所有下拉刷新，上拉加载。
			ajaxQueryPageInfo(null);	
			mui(document.querySelector('#item1mobile .mui-scroll')).pullToRefresh({
					up: { 
						callback: function() {
							var self = this;
							var ul = self.element.querySelector('#list');
							ajaxQueryPageInfo(self);	
						}
					}
				});
				
			function ajaxQueryPageInfo(obj){
				//合买方案
	    		mui.app_request("/ftogether_trade/list",{pageNo:pageNo},
	    			function(result){
	    					var s=JSON.stringify(result);
	    					if (mui.isnull(result.data) || result.data.length< 10){
	    						if (obj){
	    							obj.endPullUpToRefresh(true);
	    						}
	    					}else
	    					{
	    						if (obj){
	    							obj.endPullUpToRefresh();
	    						}
	    					
	    					}
	    					pageNo = pageNo+1;
	    				var _html='';
	    				for (var i in result.data) { 
	    					if (result.data[i].status==1){
	    						_html +='<li class="mui-table-view-cell" tradeID="'+result.data[i].id+'">'
								_html +='<div class="bl_info">'
								_html +=' 	<h3><b>'+result.data[i].name+'</b><i class="bl_i_star">合买中</i></h3>'
								_html +=	'<p>'+result.data[i].openTimeStr+'开仓</p>'
								_html +='</div>'
								_html +='<div class="bl_qu">'
								var totalCopies = result.data[i].riseCopies+result.data[i].dropCopies;
								var risePerfect = totalCopies==0?0:((result.data[i].riseCopies/totalCopies)*100).toFixed(2);
								var dropPerfect = totalCopies==0?0:((result.data[i].dropCopies/totalCopies)*100).toFixed(2);
								_html +='	<p class="bl_qu_up"><i>看涨</i>'+risePerfect+'%</p>'
								_html +='	<p class="bl_qu_down"><i>看跌</i>'+dropPerfect+'%</p>'
								_html +='</div>'
								_html +='</li>';
	    					}
	    					if (result.data[i].status==2){
	    						_html +='<li class="mui-table-view-cell" tradeID="'+result.data[i].id+'">'
								_html +='<div class="bl_info">'
								_html +=' 	<h3><b>'+result.data[i].name+'</b><i class="bl_i_star">操盘中</i></h3>'
								_html +=	'<p>'+result.data[i].openTimeStr+'开仓</p>'
								_html +='</div>'
								_html +='<div class="bl_qu">'
								var riseOrders = parseInt(result.data[i].realRiseCopies/result.data[i].fullCopies);
								var dropOrders = parseInt(result.data[i].realDropCopies/result.data[i].fullCopies); 
								_html +='	<p class="bl_qu_up"><i>看涨</i>操盘'+riseOrders+'单</p>'
								_html +='	<p class="bl_qu_down"><i>看跌</i>操盘'+dropOrders+'单</p>'
								_html +='</div>'
								_html +='</li>';
	    					}
	    					
	    					if (result.data[i].status==3){
	    						_html +='<li class="mui-table-view-cell bl_over" tradeID="'+result.data[i].id+'">'
								_html +='<div class="bl_info">'
								_html +=' 	<h3><b>'+result.data[i].name+'</b><i class="bl_i_star">已结算</i></h3>'
								_html +=	'<p>'+result.data[i].openTimeStr+'开仓</p>'
								_html +='</div>'
								_html +='<div class="bl_qu">'
								var risePoint = result.data[i].callClosePoint-result.data[i].callOpenPoint;
								var dropPoint = result.data[i].putClosePoint-result.data[i].putOpenPoint;
								var realRiseCopies = result.data[i].realRiseCopies;
								var realDropCopies = result.data[i].realDropCopies
								var totalCopies = realRiseCopies+realDropCopies;
								var risePefert=0;
								var profitPoint=0;
								//看涨盈利，看跌亏损
								if (risePoint>0 && dropPoint>=0){
									risePefert = totalCopies==0?0:((realRiseCopies/totalCopies)*100).toFixed(2);
									profitPoint = risePoint;
								}
								//看跌盈利，看涨亏损
								if (risePoint<=0 && dropPoint<0){
									risePefert = totalCopies==0?0:((realDropCopies/totalCopies)*100).toFixed(2);
									profitPoint = dropPoint;
								}
								
								//看涨看跌均盈利
								if (risePoint>0 && dropPoint<0){
									if (risePoint>Math.abs(dropPoint)){
										risePefert = totalCopies==0?0:((realRiseCopies/totalCopies)*100).toFixed(2);
										profitPoint = risePoint;
									}else
									{
										risePefert = totalCopies==0?0:((realDropCopies/totalCopies)*100).toFixed(2);
										profitPoint = dropPoint;
									}
									
								}
								
								_html +='	<p><i class="bl_qu_win">胜率</i>'+risePefert+'%</p>'
								_html +='	<p><i class="bl_qu_qu">盈利</i>'+Math.abs(profitPoint.toFixed(2))+'点</p>'
								_html +='</div>'
								_html +='</li>';
	    					}
	    					
	    				}
	    				//alert();
	    				document.getElementById("list").innerHTML+=_html;
	    			},function(result){
		    			mui.toast(result.message);
		    			return;
	    		});
	    		//监听合买列表点击事件
				mui("#list").on('tap','li',function(){  		  
					//获取方案ID
					var tradeID = this.getAttribute("tradeID");
					//alert(tradeID); 
					var p=plus.webview.getWebviewById("buyDate");
					if(p){
						mui.app_refresh('buyDate');   
					}
		    		mui.openWindow({url:"/tzdr/buy/buyDate.html",id:"buyDate",extras:{tradeID:tradeID}});
				});
			}
    		
    		
    		
    		
			
			
			// 获取盈利率
			mui.app_request("/ftogether_trade/win_profit_rank",{},
    			function(result){
    				// 活动期间绑定banner 点击事件
    				if (result.data.isFtogetherActivityTime){
    					//合买图片链接新闻
						document.getElementById("hm_banner").addEventListener("tap",function(){
							var nid = '8af5e81855727f6c0155b99f0e9b6f50';
							mui.openWindow({url:"/tzdr/news/news.html",id:nid,extras:{nid:nid}});
						});
    				}
    				// 胜率排行
	    			if (result.data.win){
	    				var _html ='';
	    				for (var i in result.data.win) { 
	    					_html +='<tr>';
	    					 if (i<3){
	    					 	_html +='<td><b class="br_num'+(Number(i)+1)+'"></b></td>';
	    					 }else
	    					{
	    							_html +='<td>'+(Number(i)+1)+'</td>';	
	    					}
	    					_html +='<td>'+hideMobile(result.data.win[i].mobile)+'</td>';
	    					_html +='<td width="38%"><i>'+(mui.isnull(result.data.win[i].percent)?"0":result.data.win[i].percent)+'</i>%</td>';
	    					_html +='</tr>';
	    				}
	    				document.getElementById("winRankTab").innerHTML=_html;
	    			}
	    			// 盈利率排行
	    			if (result.data.profit){
	    				var _html ='';
	    				for (var i in result.data.profit) { 
	    					_html +='<tr>';
	    					 if (i<3){
	    					 	_html +='<td><b class="br_num'+(Number(i)+1)+'"></b></td>';
	    					 }else
	    					{
	    							_html +='<td>'+(Number(i)+1)+'</td>';	
	    					}
	    					_html +='<td>'+hideMobile(result.data.profit[i].mobile)+'</td>';
	    					_html +='<td width="38%"><i>'+(mui.isnull(result.data.profit[i].percent)?"0":result.data.profit[i].percent)+'</i>%</td>';
	    					_html +='</tr>';
	    				}
	    				document.getElementById("prefitRankTab").innerHTML=_html;
	    			}
    			},function(result){
	    			mui.toast(result.message);
	    			return;
    		});
    		
    	});
    	
    	
    	 /**
		     * 隐藏手机号码
		     * @param {Object} mobile
		     */
		    function hideMobile(mobile){
		    	
		    	if (mui.isnull(mobile)){
		    		return mobile;
		    	}
		    	
		    	var result = mobile;
		    	if (mobile.length>=11){
		    		result =  mobile.substr(0,3)+"****"+mobile.substr(7);
		    	}
		    	
		    	var cacheMobile = mui.cacheUser.get(tzdr.constants.user_mobile);
		    	//alert(tzdr.cacheUser.get(tzdr.constants.user_mobile););
		    	if (cacheMobile==mobile){
		    		result = result+"(自己)";
		    	}
		    	return result;
		    }
    </script>
</head>
<body>
	<nav class="navlist">
		<a  href="javascript:void(0);" id="product">
			<span class="mui-icon mui-icon-compose"></span>
			<span class="mui-tab-label">操盘</span>
		</a>
		<!--<a class="navon" href="javascript:void(0);"  id="ftogether"> 
			<span class="mui-icon mui-icon-flag"></span>
			<span class="mui-tab-label">合买</span>
		</a>-->
		<a class="" href="javascript:void(0);"  id="scheme">
			<span class="mui-icon mui-icon-list"></span>
			<span class="mui-tab-label">方案</span>
		</a>
		
		<a class="" id="account" href="javascript:void(0);">
			<span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
			<span class="mui-tab-label" >账户</span>
		</a>
	</nav>
<div class="mui-content">
	<div id="slider" class="mui-slider">
		<div  class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" id="buy_nav">
			<a class="mui-control-item mui-active" href="#item1mobile">参与合买</a>
			<a class="mui-control-item" href="#item2mobile" >合买榜单</a> 
		</div>
		<div class="mui-slider-group" id="itembox">
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="buy_banner" id="hm_banner">
							<!--<img src="http://update.vs.com/Future/download/webs/hemai_banner.png">-->
							<img src="../../images/hemai.png">
						</div>
						<ul id="list" class="mui-table-view mui-table-view-chevron buy_list">
							<!--<li class="mui-table-view-cell">
								<div class="bl_info">
									<h3><b>国际原油 04170930</b><i class="bl_i_star">合买中</i></h3>
									<p>04.17 周四  09:30开仓</p>
								</div>
								<div class="bl_qu">
									<p class="bl_qu_up"><i>看涨</i>00.00%</p>
									<p class="bl_qu_down"><i>看跌</i>100.00%</p>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="bl_info">
									<h3><b>国际原油 04170930</b><i class="bl_i_ing">操盘中</i></h3>
									<p>04.17 周四  09:30开仓</p>
								</div>
								<div class="bl_qu">
									<p class="bl_qu_up"><i>看涨</i>操盘2单</p>
									<p class="bl_qu_down"><i>看跌</i>操盘10005单</p>
								</div>			
							</li>		
							<li class="mui-table-view-cell bl_over">
								<div class="bl_info">
									<h3><b>国际原油 04170930</b><i>已结算</i></h3>
									<p>04.17 周四  09:30开仓</p>
								</div>
								<div class="bl_qu">
									<p><i class="bl_qu_win">胜率</i>76.23%</p>
									<p><i class="bl_qu_qu">盈亏</i>250.5点</p>
								</div>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
			<div id="item2mobile" class="mui-slider-item mui-control-content buy_rank">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<h2>胜率排行：</h2>
						<table border="0" cellpadding="0" cellspacing="0" id="winRankTab">
							<!--
							<tr>
								<td><b class="br_num1"></b></td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td><b class="br_num2"></b></td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td><b class="br_num3"></b></td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>4</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>5</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>6</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>7</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>8</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>9</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>10</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
						-->
						</table>
						<h2>盈利率排行：</h2>
						<table border="0" cellpadding="0" cellspacing="0" id="prefitRankTab">
							<!--<tr>
								<td><b class="br_num1"></b></td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td><b class="br_num2"></b></td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td><b class="br_num3"></b></td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>4</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>5</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>6</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>7</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>8</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>9</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>
							<tr>
								<td>10</td>
								<td>186****2239</td>
								<td><i>84.00</i>%</td>
							</tr>-->
						</table>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	
</div>
</body>
<script>
	var item = document.getElementById('itembox');
    var scheight = document.documentElement.clientHeight;
	var infoheihgt = scheight - 44 -57;
	item.style.height = infoheihgt + 'px';
	(function($) {
		$('.mui-scroll-wrapper').scroll({
			indicators: true //是否显示滚动条
		});				
	})(mui);
</script>
</html>